Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Storybook 上で props のドキュメントが表示されない問題を修正 #4719

Merged
merged 5 commits into from
Jun 14, 2024

Conversation

s-sasaki-0529
Copy link
Contributor

Related URL

https://smarthr.atlassian.net/browse/SHRUI-989

Overview

Storybook v8 にマイグレーションしたタイミングから、Storybook 上で props のドキュメンテーションが表示されなくなっていたので復活させる

What I did

コンポーネントの静的解析に react-docgen でなく react-docgen-typescript を使用するように明示する

Capture

CleanShot 2024-06-13 at 21 49 20

@s-sasaki-0529 s-sasaki-0529 self-assigned this Jun 13, 2024
@@ -64,6 +64,9 @@ const config: StorybookConfig = {
docs: {
autodocs: true,
},
typescript: {
reactDocgen: 'react-docgen-typescript',
},
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

コンポーネントファイルの静的解析を行ってるツールが、Storybook v7 までは react-docgen-typescript だったんですが、v8 からはデフォルトが react-docgen に代わりました。

react-docgen の強みはパフォーマンスなんですが、機能面ではわずかに react-docgen-typescript に負けます。
基本的には react-docgen でことたりるんですが、どうやら smarthr-ui の Storybook の使い方だと、 react-docgen-typescript を使わないと情報が取得できなかったみたいです。なので使用するツールを明示して復活させます。

このあたりについては、急に手前味噌記事を出しますが、以下記事で深堀りしてます。
Storybook と react-docgen の仕組みを追う

@s-sasaki-0529 s-sasaki-0529 marked this pull request as ready for review June 13, 2024 12:54
@s-sasaki-0529 s-sasaki-0529 requested a review from a team as a code owner June 13, 2024 12:54
@s-sasaki-0529 s-sasaki-0529 requested review from yt-ymmt and moshisora and removed request for a team June 13, 2024 12:54
Copy link
Collaborator

@uknmr uknmr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cntrols たぶで unknown になっていた props が表示されてることを確認しました。
ついでに自動生成される Docs に Controls を表示してもよさそうに思いました!

    docs: {
      page: () => (
        <>
          <Title />
          <Subtitle />
          <Description />
          <Primary />
          <Controls /> /* ← これを足す */
          <Stories includePrimary={false} />
        </>
      ),
    },

Copy link
Contributor

@oti oti left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@s-sasaki-0529 s-sasaki-0529 enabled auto-merge (squash) June 14, 2024 02:16
@s-sasaki-0529 s-sasaki-0529 merged commit 7a634ae into master Jun 14, 2024
8 checks passed
@s-sasaki-0529 s-sasaki-0529 deleted the SHRUI-989 branch June 14, 2024 02:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants